<!--页面模板-->
<template>
    <div class="pageView-container">
        <!--查询-->
        <div class="search-container">
            <h-search-bar :show-more="true" @toggle="searchMore = $event" @search="getTableData">
                <el-form :model="queryParams" label-width="100px" inline>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="客户名称">
                                <el-input v-model="queryParams.customerName" style="width: 220px" clearable/>
                            </el-form-item>
                        </el-col>
                        <!--<el-col :span="8">-->
                            <!--<el-form-item label="跟进阶段">-->
                                <!--<el-select v-model="queryParams.followUpStage" style="width: 200px" clearable>-->
                                    <!--<el-option v-for="item in follow_step" :key="item.value" :label="item.label"-->
                                               <!--:value="item.label"/>-->
                                <!--</el-select>-->
                            <!--</el-form-item>-->
                        <!--</el-col>-->
                        <el-col :span="12">
                            <el-form-item label="时间范围">
                                <el-date-picker
                                        v-model="dateRange"
                                        type="daterange"
                                        unlink-panels
                                        range-separator="到"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        value-format="YYYY-MM-DD"
                                        style="width:240px"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-show="searchMore">
                    </el-row>
                </el-form>
            </h-search-bar>
            <div class="btns-container">
                <el-button type="success" icon="plus" @click="dialog1Show">新 增</el-button>
                <!--<el-button type="primary" size="small" icon="el-icon-download" @click="handleExport">导 出</el-button>-->
                <!--<div class="ml10">-->
                <!--<el-upload action="#" name="file" accept=".xlsx, .xls" :show-file-list="false"-->
                <!--:http-request="handleUploadExcel">-->
                <!--<el-button size="small" icon="el-icon-upload2" type="warning">上 传</el-button>-->
                <!--</el-upload>-->
                <!--</div>-->
            </div>
        </div>

        <!--Table-->
        <el-table :data="list" v-loading="loading" :stripe="true" :header-cell-style="{background:'#F2F3F5', color: '#8F9BB3'}">
            <el-table-column align="center" label="#" min-width="80" type="index"/>
            <el-table-column align="center" label="姓名" min-width="220" prop="name" show-overflow-tooltip>
                <template v-slot="scope">
                    <span class="underline" @click="getCustomerInfo(scope.row)">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="性别" min-width="120" prop="sex">
                <template #default="{ row }">
                    <div>{{row.sex + '的'}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="image" label="图片" align="center">
                <template #default="{ row }">
                    <el-image v-if="row.image" :src="row.image"  style="width: 50px; height: 50px;margin: auto auto" />
                </template>
            </el-table-column>
            <el-table-column align="center" label="地址" width="220" prop="address" show-overflow-tooltip/>
            <el-table-column align="center" label="操作" width="120" fixed="right">
                <template v-slot="scope">
                    <el-button link type="primary" @click="handleEdit(scope.row)">修改</el-button>
                    <el-divider direction="vertical"/>
                    <el-button link type="primary" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getTableData"/>

        <!--Dialog-->
        <el-dialog :title="dialog1.title" width="700px" v-model="dialog1.show" :append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="formInfo" :model="dialog1.formInfo" :rules="dialog1.rules" label-width="75px" label-position="left">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账号" prop="username">
                            <el-input v-model.trim="dialog1.formInfo.username" :style="dialog1.width" :disabled="dialog1.formInfo.systemUserId!=undefined"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="角色" prop="systemRoleId">
                            <el-select v-model="dialog1.formInfo.systemRoleId" placeholder="请选择岗位" clearable :style="dialog1.width" >
                                <el-option v-for="item in dialog1.roleOptions" :key="item.id" :label="item.roleName" :value="item.systemRoleId" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="图片">
                    <h-images-upload :imgList="dialog1.fileList" @handle-upload="handleUpload"/>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="submitDialog1">确 定</el-button>
                <el-button @click="dialog1Close">取 消</el-button>
            </template>
        </el-dialog>

    </div>
</template>

<script setup name="page">
/** Base */
import setting from './setting'
const { proxy } = getCurrentInstance()

/** 组件引用 */

/** 表单*/
const table = reactive({
    loading: false,
    list:[],
    total:0,
    columns: setting.columns,
    queryParams: {
        username:"",
        phone:"",
        pageNum: 1,
        pageSize: 10,
    },
})
const { loading, list, total, queryParams } = toRefs(table);

/** dialog*/
const dialog = reactive({
    dialog1: {
        show: false,
        title:'新增',
        width:'width:220px',
        rules: setting.rules,
        roleOptions:[],
        formInfo:{
            username:'',
            nickName:'',
            phone:'',
            systemRoleId: '',
        }
    },
})
const { dialog1 } = toRefs(dialog);

/** 生命周期*/
onMounted(() => {
    getTableData()
})

/** 表单分页 */
const getTableData = async () => {
    let _ = proxy
    loading.value = true
    // const {data: res} = await _.$H.post(_.$A.api.page, queryParams.value)
    // list.value = res.data.rows || []
    // total.value = res.data.total
    // 模拟接口
    total.value = 0
    list.value = []
    for (let i = 0; i < 10; i++) {
        list.value.push({
            id: `123456789${i + 1}`,
            name: `莲塘别墅广场${i + 1}`,
            sex: i%2===0?'男':'女',
            address: `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa${i + 1}`,
            image: i%2===0?'http://wxb1997.oss-cn-beijing.aliyuncs.com/img/基督里维斯和狗.png':'',
            format: i%2===0?'1':'0',
            tag: i%2===0?'1':'0',
        });
    }
    total.value = list.value.length || 0
    setTimeout(() => {
        loading.value  = false
    },500)
    loading.value  = false
    console.log('tableDta',list.value)
}

/** 表单操作*/
// 修改
const handleEdit = async(row) => {
    let _ = proxy
    dialog1.value.show = true
    let data = {
        id: row.id
    }
    const {data: res} = await _.$H.post(_.$A.api.findById, data)
    dialog1.value.formInfo = res.data || {}
    dialog1.value.title = '修改'
    dialog1.value.show = true
}

// 删除
const handleDel = async(row) => {
    let _ = proxy
    _.$modal.confirm("确认删除该条记录？", "删除", () => { delOne(row.id) })
}
// 单条删除
const delOne = async(id) =>{
    let _ = proxy
    let data = {
        ids:[id]
    }
    const { data: res } = await _.$H.post(_.$A.api.del, data)
    if(res.code==200){
        _.$modal.msgSuccess('删除成功！')
    }else {}
    getTableData()
}


// 图片上传
const handleUpload = async(file) => {
    let _ = proxy,
        formData = new FormData()
    console.log('handleUpload',file.value)
    formData.append('multipartFile', file.file)
    const {data: res} = await _.$H.upload(_.$A.upload, formData)
    continueFollowInDialog.value.fileList.push({
        id: res.data.fileId,
        name: res.data.fileName,
        filePath: res.data.fileInternetAddress
    })
}

const handleSelectionChange = (val) => {
    console.log('handleSelectionChange',val)
}

/** 提交按钮 */
//dialog1显示
const dialog1Show = () => {
    let _ = proxy
    dialog1.value.title = '新增'
    dialog1.value.show = true
    reset()
    console.log('handleAdd')
}

const submitDialog1 = () => {
    let _ = proxy
    _.$refs["formInfo"].validate(async (valid) => {
        if(!valid) return
        if(_.$V.isEmpty(dialog1.value.formInfo.id)){
            const { data: res } = await _.$H.post(_.$A.api.add, dialog1.value.formInfo)
            if(res.code==200){
                _.$M.msgSuccess('提交成功！')
            }else {}
        }else {
            const { data: res } = await _.$H.post(_.$A.api.edit, dialog1.value.formInfo)
            if(res.code==200){
                _.$M.msgSuccess('修改成功！')
            }else {}
        }
        getTableData()
        dialog1.value.show = false
    })
}

//dialog1隐藏
const dialog1Close = () => {
    dialog1.value.show  = false
    reset()
}
const reset = () => {
    let _ = proxy
    dialog1.value.formInfo = {
        username: '',
        nickName: '',
        phone: '',
        systemRoleId: '',
    };
    _.resetForm("formInfo");
}

getTableData()
</script>

<style lang="less" scoped>
@import "index.scss";
</style>
